<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../../css/bookdetails/Introduction.css" />
	</head>

	<body>
		<div class="frequency">
			<div class="audio_img"><img :src="detail.guidePicUrl" /></div>
			<div class="audio">
				<audio :src="detail.guideVoiceUrl" controls="controls" preload="auto"></audio>
			</div>
			<div class="mask"></div>
			<div class="play"><img src="../../imges/play.png" /></div>
		</div>

		<script src="../../js/mui.min.js"></script>
		<script src="../../js/libs/vue.js"></script>
		<script src="../../js/common/common.js"></script>
		<script src="../../js/libs/zepto_1.1.3.js"></script>
		<script type="text/javascript">
			mui.init()
			var introduction = new Vue({
				el: '.frequency',
				data: {
					detail: ""
				}
			})
			var audios = document.getElementsByTagName("audio")[0]
			$(".play").on("tap", function() {
				audios.play()
				hide()
			})

			$("audio").on("pause", function() {
				$(".play").css("display", "block")
				$(".mask").css("display", "block")
				$("audio").css("display", "none")
			}).on("seeking", function() {
				hide()
			})
			$(".mask").on("tap", function() {
				audios.play()
				hide()
			})

			function hide() {
				$(".play").css("display", "none")
				$(".mask").css("display", "none")
				$("audio").css("display", "block")
			}



			function parent(id) {
				common.ajax("book/" + id, {
					token: common.token,
					uid: common.uid
				}, function(data) {
					if(data.code == 200) {

						introduction.detail = data.data
					} else {
						mui.toast(data.message)
					}
				})
			}
		</script>
	</body>

</html>